import React, { Component } from 'react';
import { hashHistory } from 'react-router';
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { WingBlank, WhiteSpace, Toast, ListView, Modal } from 'antd-mobile';
import BookClassifyListTop from './sub/bookClassifyListTop.js';
import BookItem from'common/components/bookItem.js';
import * as common from 'common/common.js';
import * as bookinfoApi from 'common/api/bookinfo.js';
import './bookClassifyList.less';

const prompt = Modal.prompt;

/*
 * 分类商品列表	
 */
class BookClassifyList extends Component{

	constructor(props) {
	    super(props);
	    const ds = new ListView.DataSource({
	      rowHasChanged: (row1, row2) => row1 !== row2
	    });
	    this.fetchData = [];
    	this.state = {
    		hasMore: true,
    	 	pageNo: 0,
    	 	pageTotal: 100,
	      	ds: ds,
	      	isLoading: true,
	      	height: document.documentElement.clientHeight * 3 / 4,
	    }
	}

	renderRow = (book) => {
	    return (
	      <div>
	        <BookItem book={book}></BookItem>
	      </div>
	    )
  	}

  	componentDidMount() {
	    const height = document.documentElement.clientHeight;
		setTimeout(() => {
	      	bookinfoApi.bookClassifyList({
				classifyName: this.props.params.classifyName,
				pageNo: this.state.pageNo
		  	}).then(result => {
	      		this.fetchData = [ ...this.fetchData, ...result.data.books];
				this.setState({
			        ds: this.state.ds.cloneWithRows(this.fetchData),
			        isLoading: false,
			        height: height
		      	});
		  	})
	    }, 500);
  	}

  	onEndReached = (event) => {
  		if(this.state.pageNo+2 > this.state.pageTotal){
	    	this.setState({
	    		hasMore: false
	    	})
	    	return;
	    }
	    if (this.state.isLoading && !this.state.hasMore) {
	      	return;
	    }
	    this.setState({ 
	      	isLoading: true, 
	      	pageNo: this.state.pageNo + 1
	    });
	    setTimeout(() => {
	      	bookinfoApi.bookClassifyList({
				classifyName: this.props.params.classifyName,
				pageNo: this.state.pageNo
		  	}).then(result => {
				this.fetchData = [ ...this.fetchData, ...result.data.books];
			 	this.setState({
			        ds: this.state.ds.cloneWithRows(this.fetchData),
			        isLoading: false,
		      	});
		  	})
	    }, 500);
  	}

  	setPageNo = () => {
  		prompt('选择页码', '',
	      [
	        {
	          text: '取消',
	          onPress: value => new Promise((resolve) => {resolve();}),
	        },
	        {
	          text: '确定',
	          onPress: value => new Promise((resolve, reject) => {
	          	resolve();
	          	if(isNaN(value)){
	          		Toast.info("请输入数字", 1);
	          		return;
	          	}
	          	if(parseInt(value) > this.state.pageTotal){
	          		Toast.info("最大页数为"+this.state.pageTotal, 1);
	          		return;
	          	}
	            const height = document.documentElement.clientHeight;
		  		this.setState({
		  			pageNo: parseInt(value)-1
		  		})
				setTimeout(() => {
			      	bookinfoApi.bookClassifyList({
						classifyName: this.props.params.classifyName,
						pageNo: this.state.pageNo
				  	}).then(result => {
			      		this.fetchData = [...result.data.books];
						this.setState({
					        ds: this.state.ds.cloneWithRows(this.fetchData),
					        isLoading: false,
					        height: height
				      	});
				  	})
			    }, 500);
	          }),
	        },
      	], 'default', null, ['输入数字'])

  		
  	}

	render(){
		return(
			<div className="container bookClassifyList">
				<BookClassifyListTop classifyName={this.props.params.classifyName}></BookClassifyListTop>
				<ListView
			        style={{
			          height: this.state.height,
			          overflow: 'auto'
			        }}
			        ref={el => this.lv = el}
			        dataSource={this.state.ds}
			        renderRow={this.renderRow}
			        renderFooter={() => (
			          <div style={{ padding: 30, textAlign: 'center', fontSize: '0.28rem' }}>
			          	{
			          		this.state.hasMore 
			          		?
			          			this.state.isLoading
			          			?
			          			'加载中...' 
			          			: 
			          			'上拉加载'
			          		:
			          		'加载完毕'
			          	}
			          </div>
			        )}
			        renderBodyComponent={() => (
			        	<WingBlank>{this.children}</WingBlank>
			        )}
			        pageSize={100}
			        scrollRenderAheadDistance={500}
			        onEndReached={this.onEndReached}
			        onEndReachedThreshold={10}
		      	/>
		      	<div className="pageTips" onClick={this.setPageNo}>
		      		<span>{this.state.pageNo+1}</span>/<span>{this.state.pageTotal}</span>
				</div>
			</div>
		)
	}
}

export default BookClassifyList;